<template>
  <scroll-view class="simple-tabs-scroll-view" :scroll-x="true" :style="{ position: fixed ? 'fixed' : 'unset' }">
    <view class="simple-tabs">
      <view
        v-for="item in items"
        :key="item.id"
        :class="value === item.id ? 'simple-tab simple-tab-active' : 'simple-tab simple-tab-default'"
        @click="onTabChange(item)"
      >
        <text>{{ item.name }}</text>
        <view v-if="value === item.id" class="simple-tab-active-bar" />
        <view v-else class="simple-tab-none-bar" />
      </view>
    </view>
  </scroll-view>
</template>
<script lang="ts">
export default {
  name: 'SimpleTabs',
};
</script>
<script setup lang="ts">
import './index.less';
import { PropType } from 'vue';
import { ProtoType } from '@/api/proto';

interface SimpleTabsType {
  id: number | string;
  name: string;
}
const props = defineProps({
  value: {
    type: Number || String || null,
    default: null,
  },
  fixed: {
    type: Boolean,
    default: false,
  },
  items: {
    type: Object as PropType<SimpleTabsType[]>,
    default: () => {
      return [];
    },
  },
});
const emit = defineEmits(['tab-change']);

const onTabChange = (item: SimpleTabsType) => {
  emit('tab-change', item);
};
</script>
